<template>
  <div class="demo-index">
    <div class="search-box">
      <ep-advance-card title="查询" theme="theme-1">
        <ep-form ref="form" :form="form" name-width="0px">
          <ep-row :gutter="10">
            <ep-col :col="12" :md="6">
              <ep-form-item attr="id">
                <ep-input v-model="form.id" placeholder="账单号"></ep-input>
              </ep-form-item>
            </ep-col>
            <ep-col :col="12" :md="6">
              <ep-form-item attr="payeeName">
                <ep-input v-model="form.payeeName" placeholder="收款方机构"></ep-input>
              </ep-form-item>
            </ep-col>
            <ep-col :col="12" :md="6">
              <ep-form-item attr="payerName">
                <ep-input v-model="form.payerName" placeholder="付款方机构"></ep-input>
              </ep-form-item>
            </ep-col>
            <ep-col :col="12" :md="6">
              <ep-form-item attr="bizType">
                <ep-input v-model="form.bizType" placeholder="业务类型"></ep-input>
              </ep-form-item>
            </ep-col>
            <ep-col :col="12" :md="6">
              <ep-form-item attr="payableCurr">
                <ep-select v-model="form.payableCurr" placeholder="货币类型">
                  <ep-select-item index="CNY" label="CNY"></ep-select-item>
                  <ep-select-item index="USD" label="USD"></ep-select-item>
                </ep-select>
              </ep-form-item>
            </ep-col>
            <ep-col :col="12" :md="6">
              <ep-form-item attr="status">
                <ep-select v-model="form.status" placeholder="状态">
                  <ep-select-item index="0" label="无效"></ep-select-item>
                  <ep-select-item index="1" label="有效"></ep-select-item>
                </ep-select>
              </ep-form-item>
            </ep-col>
            <ep-col :col="12" :md="6">
              <ep-form-item attr="date">
                <ep-date-range v-model="form.date" type="dateTime"></ep-date-range>
              </ep-form-item>
            </ep-col>
            <ep-col :col="12" :md="6">
              <ep-form-item>
                <ep-button type="primary" icon="ios-refresh-empty" @click="resetForm">重置</ep-button>
                <ep-button type="primary" icon="search">查询</ep-button>
              </ep-form-item>
            </ep-col>
          </ep-row>
        </ep-form>
      </ep-advance-card>
      <ep-collapse>
        <ep-collapse-item icon="search" title="更多检索项" index="1">
          <ep-form ref="formExpand" :form="form" name-width="0px">
            <ep-row :gutter="10">
              <ep-col :col="6">
                <ep-form-item attr="input1">
                  <ep-input v-model="form.input1" placeholder="字段1"></ep-input>
                </ep-form-item>
              </ep-col>
              <ep-col :col="6">
                <ep-form-item attr="input2">
                  <ep-input v-model="form.input2" placeholder="字段2"></ep-input>
                </ep-form-item>
              </ep-col>
              <ep-col :col="6">
                <ep-form-item attr="input3">
                  <ep-input v-model="form.input3" placeholder="字段3"></ep-input>
                </ep-form-item>
              </ep-col>
              <ep-col :col="6">
                <ep-form-item attr="input4">
                  <ep-input v-model="form.input4" placeholder="字段4"></ep-input>
                </ep-form-item>
              </ep-col>
            </ep-row>
          </ep-form>
        </ep-collapse-item>
      </ep-collapse>
    </div>
    <div class="result-box">
      <ep-advance-card title="查询结果" theme="theme-1">
        <div class="operate-box">
          <ep-button type="primary" icon="plus-round" @click="handleAdd">新增(弹窗模式)</ep-button>
          <ep-button type="primary" icon="plus-round" @click="handleAddMultiPage">新增(多页面模式)</ep-button>
          <ep-button type="primary" @click="selectUSDCol"> 选中美元的列 </ep-button>
          <ep-button type="primary" @click="cancelSelectCol"> 取消选中列 </ep-button>
        </div>
        <div class="table-box">
          <ep-table ref="table" :data="tableData" :height="372" head-color expand-key="id">
            <ep-table-item type="select"></ep-table-item>

            <ep-table-item type="num"></ep-table-item>
            <ep-table-item column="id" title="账单号" sortable></ep-table-item>
            <ep-table-item column="payeeName" title="收款方机构"></ep-table-item>
            <ep-table-item column="payerName" title="付款方机构"></ep-table-item>
            <ep-table-item column="bizType" title="业务类型"></ep-table-item>
            <ep-table-item column="payableCurr" title="货币类型"></ep-table-item>
            <ep-table-item column="status" title="状态" width="150px">
              <template slot-scope="props">
                {{ props.row.status === '1' ? '有效' : '无效' }}
              </template>
            </ep-table-item>
            <ep-table-item title="操作" fixed="right" min-width="300px">
              <template slot-scope="props">
                <ep-button type="primary" @click="handleEdit(props)">编辑(弹窗)</ep-button>
                <ep-button type="primary" @click="handleEditMultiPage(props)">编辑(多页面)</ep-button>
                <ep-dropdown>
                  <ep-button style="margin-left: 10px" slot="item" icon="arrow-down-b" right-icon>更多操作</ep-button>
                  <ep-dropdown-item>更多操作1</ep-dropdown-item>
                  <ep-dropdown-item>更多操作2</ep-dropdown-item>
                  <ep-dropdown-item>更多操作3</ep-dropdown-item>
                </ep-dropdown>
              </template>
            </ep-table-item>
          </ep-table>
        </div>
        <div class="pagination-box">
          <ep-pager :total-num="total" @change="handleChange" @size-change="sizeChange" right></ep-pager>
        </div>
      </ep-advance-card>
    </div>

    <demoModal ref="demoModal" :title="modalTitle" @saveHandle="saveHandle" :formData="formData" />
  </div>
</template>

<script>
import { cloneObj } from '@/utils/data'
import { tableData } from './data'
import demoModal from './components/modal.vue'
export default {
  components: {
    demoModal
  },
  created() {},
  data() {
    return {
      form: {
        id: '',
        payeeName: '',
        payerName: '',
        bizType: '',
        status: '',
        date: '',
        payableCurr: '',
        input1: '',
        input2: '',
        input3: '',
        input4: ''
      },
      total: 100,
      tableData: tableData,
      modalTitle: '',
      formData: {}
    }
  },
  methods: {
    saveHandle(data) {
      console.log(data)
    },
    handleEdit(props) {
      console.log(props.row)
      this.modalTitle = '修改数据'
      this.formData = cloneObj(props.row)
      this.$refs.demoModal.showModal = true
    },
    handleEditMultiPage(props) {
      this.$app.$emit('open-tab', {
        path: `/multiPageDemo/${props.row.id}`
      })
    },
    handleChange() {},
    sizeChange() {},
    handleAdd() {
      this.modalTitle = '新增数据'
      this.$refs.demoModal.showModal = true
    },
    handleAddMultiPage() {
      this.$app.$emit('open-tab', {
        path: '/multiPageDemo'
      })
    },
    selectUSDCol() {
      this.$refs.table.selectChangeEach(data => {
        return data.payableCurr === 'USD'
      })
    },
    cancelSelectCol() {
      this.$refs.table.selectChangeEach(_ => {
        return false
      })
    },
    resetForm() {
      this.$refs.form.reset()
      this.$refs.formExpand.reset()
    }
  }
}
</script>

<style lang="less" scoped>
.demo-index {
  .search-box {
    margin-bottom: 20px;
  }
  .result-box {
    .operate-box {
      margin-bottom: 10px;
    }
    .pagination-box {
      margin-top: 10px;
    }
  }
}
/deep/.ep-collapse-item-content {
  background-color: #fff;
}
</style>
